<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .wrapper {
            width: 298px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            overflow: hidden;
        }

        #left,
        #center{
            float: left;
        }
        #right {
            float: right;
        }
        #center {
            position: relative;
        }

        #left li,
        #right li {
            background: url(images/lili.jpg) repeat-x;
        }

        #center li {
            /* float: left; */
            /* visibility: hidden; */
            display: none;
        }

        #center li.active {
            /* visibility: visible; */
            display: block;
        }

        #left li a,
        #right li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }

        #left li a:hover,
        #right li a:hover {
            background-image: url(images/abg.gif);
        }

        #center {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div class="wrapper">
        <ul id="left"></ul>
        <ul id="center"></ul>
        <ul id="right"></ul>
    </div>
</body>
<script>
    var dataList = [
        { id: 1, name: "女靴", img_src: "images/女靴.jpg" },
        { id: 2, name: "雪地靴", img_src: "images/雪地靴.jpg" },
        { id: 3, name: "冬裙", img_src: "images/冬裙.jpg" },
        { id: 4, name: "呢大衣", img_src: "images/呢大衣.jpg" },
        { id: 5, name: "毛衣", img_src: "images/毛衣.jpg" },
        { id: 6, name: "棉服", img_src: "images/棉服.jpg" },
        { id: 7, name: "女裤", img_src: "images/女裤.jpg" },
        { id: 8, name: "羽绒服", img_src: "images/羽绒服.jpg" },
        { id: 9, name: "牛仔裤", img_src: "images/牛仔裤.jpg" },
        { id: 10, name: "女包", img_src: "images/女包.jpg" },
        { id: 11, name: "男包", img_src: "images/男包.jpg" },
        { id: 12, name: "登山鞋", img_src: "images/登山鞋.jpg" },
        { id: 13, name: "皮带", img_src: "images/皮带.jpg" },
        { id: 14, name: "围巾", img_src: "images/围巾.jpg" },
        { id: 15, name: "皮衣", img_src: "images/皮衣.jpg" },
        { id: 16, name: "男毛衣", img_src: "images/男毛衣.jpg" },
        { id: 17, name: "男棉服", img_src: "images/男棉服.jpg" },
        { id: 18, name: "男靴", img_src: "images/男靴.jpg" }]
    //1.获取元素
    var left = document.querySelector("#left")
    var center = document.querySelector("#center")
    var right = document.querySelector("#right")
    //2.根据数组渲染页面
    var str_left = ""
    var str_center = ""
    var str_right = ""
    dataList.forEach(function (item) {
        //拼接字符串的方式渲染出所有li结构
        if (item.id <= 9) {
            str_left += `<li><a href="#">${item.name}</a></li>`
        }
        if (item.id > 9) {
            str_right += `<li><a href="#">${item.name}</a></li>`
        }
        str_center += `<li><a href="#"><img src="${item.img_src}" width="200" height="250" /></a></li>`
        // console.log("循环执行")
    })
    // console.log(str_left)
    // console.log(str_center)
    // console.log(str_right)
    // 3.将渲染出的结构添加到相应位置
    left.innerHTML = str_left
    center.innerHTML = str_center
    right.innerHTML = str_right
    //4.给左右的li标签添加鼠标移入事件
    //4-1.先拿到所有的li标签,得到的是三个伪数组
    var li_left = document.querySelectorAll("#left>li")
    var li_center = document.querySelectorAll("#center>li")
    var li_right = document.querySelectorAll("#right>li")
    // console.log(li_center)
    // 4-2.将li_right和li_left拼接成为一个数组
    var li_side = []
    for (var i = 0; i < li_left.length; i++) {
        li_side.push(li_left[i])
    }
    for (var j = 0; j < li_right.length; j++) {
        li_side.push(li_right[j])
    }
    // console.log(li_side)
    //4-3.当鼠标划入第n个li标签时,先给所有li清除类名,再给第n个li添加active类名
    //先给第一张添加active
    li_center[1].classList.add("active")
    li_side.forEach(function (item, index) {
        item.onmouseover = function () {
            // console.log("鼠标划过")
            for (var i = 0; i < li_side.length; i++) {
                // console.log("清除类名")
                li_center[i].className = ""
            }
            li_center[index].classList.add("active")
            // console.log("添加类名")
        }
    })
</script>

</html>